<template>
    <div>
        <mapgis-web-map
                class="main"
                :mapStyle="mapStyle"
                :zoom="mapZoom"
                :center="outerCenter"
                :crs="mapCrs"
        >
            <mapgis-igs-doc-layer
                    :layer="layer"
                    :layerId="layerId"
                    :sourceId="sourceId"
                    :ip="igsDocIp"
                    :port="igsDocPort"
                    :serverName="igsDocName"
            >
            </mapgis-igs-doc-layer>
            <mapgis-igs-doc-layer
                    :layer="layer2"
                    :layerId="layerId2"
                    :sourceId="sourceId2"
                    :ip="igsDocIp2"
                    :port="igsDocPort2"
                    :serverName="igsDocName2"
            >
            </mapgis-igs-doc-layer>
        </mapgis-web-map>
    </div>
</template>

<script>
    import Mapbox from '@mapgis/mapbox-gl'
    import { MapboxMap, MapboxIgsDocLayer } from '@mapgis/webclient-vue-mapboxgl'

    export default {
        components: {
            MapboxMap, MapboxIgsDocLayer
        },
        data () {
            return {
                mapStyle: {
                    // 设置版本号，一定要设置
                    version: 8,
                    // 添加来源
                    sources: {},
                    // 设置加载并显示来源的图层信息
                    layers: []
                }, // 地图样式
                mapZoom: 8, // 地图初始化级数
                //outerCenter: [116.39, 40.2], // 地图显示中心
                outerCenter: [111.34, 36.22], // 地图显示中心
                mapCrs: 'EPSG:4326',

                layerId: 'igsLayer_layerId',
                sourceId: 'igsLayer_sourceId',
                layer: {}, // 图层配置信息
                igsDocIp: 'develop.smaryun.com', // igs服务ip
                igsDocPort: '6163', // igs服务port
                igsDocName: '北京市', // igs地图服务名

                layerId2: 'igsLayer_layerId2',
                sourceId2: 'igsLayer_sourceId2',
                layer2: {}, // 图层配置信息
                igsDocIp2: 'jlu3s.com', // igs服务ip
                igsDocPort2: '8015', // igs服务port
                igsDocName2: 'lifen_01_4326', // igs地图服务名
            }
        },
        created() {
            // 在组件中使用mapbox-gl.js的脚本库功能
            this.mapbox = Mapbox;
        },
    }
</script>

<style>
    .main {
        height: 100vh;
        width: 100%;
    }
</style>